<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>2-1 jQuery选择器</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.6.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .mark {
            background: pink !important;
            outline: .3em dashed red !important;
        }

        .btnGroup .btn {
            margin-bottom: .2em;
        }

        .bigSmallBox {
            font-size: .8em;
            height: 34em;
            line-height: normal;
        }

        .content {
            margin: .5em .5em 1em;
            padding: .5em;
            border: .2em solid lightgray;
        }

        .content > .headerGroup,
        .content > .tableBox {
            display: inline-block;
            vertical-align: top;
            width: 48%;
        }

        .big, .bigSmallBox > span {
            display: inline-block;
            vertical-align: top;
            width: 32%;
            height: 30%;
            background-color: #dbf0ff;
            border: inset .2em #626262;
            padding: .2em .5em;
            margin: .3em .1em;

        }

        .big > .mini {
            display: inline-block;
            vertical-align: top;
            /*font-size: .8em;*/
            width: 45%;
            height: 38%;
            background-color: #d6fcc6;
            margin: .2em .1em;
            padding: 5px;
            border: inset .1em #818181;
        }

        .mini > span {
            border: .05em solid gray;
        }

        .testHide {
            display: none;
        }

        .headerGroup * {
            margin: .2em;
            padding: .2em;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>2-1 jQuery选择器</h1>
    <section class="btnGroup">
        <p>选中的元素为红色虚线边框和粉红背景
            <button class="btn btn-warning btn-sm" onclick="$('*').removeClass('mark')">重置</button>
        </p>
        <p>
            <strong>基本选择器</strong>
            <button class="btn btn-default btn-sm">id选择器 <code>$("#one")</code></button>
            <button class="btn btn-default btn-sm">类选择器 <code>$(".mini")</code></button>
            <button class="btn btn-default btn-sm">多个元素选择器<code>$("#one, #two")</code></button>
            <button class="btn btn-default btn-sm">标签选择器<code>$("div")</code></button>
            <button class="btn btn-default btn-sm">通用选择器<code>$("*")</code></button>
            <button class="btn btn-default btn-sm">混合选择器<code>$("span,#two")</code></button>
        </p>
        <p>
            <strong>层次选择器</strong>
            <button class="btn btn-default btn-sm">后代选择器.big下所有.mini <code>$(".big .mini")</code></button>
            <button class="btn btn-default btn-sm">子元素选择器.big直接子元素.mini <code>$(".big>.mini")</code></button>
            <!--<button class="btn btn-default btn-sm function">下一个兄弟元素 <code>$("#mini3-1").next()</code></button>-->
        </p>
        <p>
            <strong>基本过滤选择器</strong>
            <button class="btn btn-default btn-sm">大盒子的第一个 <code>$(".big:first")</code></button>
            <button class="btn btn-default btn-sm">小盒子的最后一个 <code>$(".mini:last")</code></button>
            <button class="btn btn-default btn-sm">不是“.one”的大盒子 <code>$(".big:not(.one)")</code></button>
            <button class="btn btn-default btn-sm">第奇数个大盒子 <code>$(".big:odd")</code></button>
            <button class="btn btn-default btn-sm">第偶数个小盒子 <code>$(".mini:even")</code></button>
            <button class="btn btn-default btn-sm">下标为3的大盒子 <code>$(".big:eq(3)")</code></button>
            <button class="btn btn-default btn-sm">下标小于3的大盒子 <code>$(".big:lt(3)")</code></button>
            <button class="btn btn-default btn-sm">下标大于3的大盒子 <code>$(".big:gt(3)")</code></button>
            <button class="btn btn-default btn-sm">所有的标题 <code>$(":header")</code></button>
            <button class="btn btn-default btn-sm">正在进行jquery动画的元素 <code>$(":animated")</code></button>
            <label class="btn btn-default btn-sm"><input type="checkbox" class="testFocus">获取到焦点(通过点击或tab键)的元素 <code>$(".bigSmallBox
                .btn:focus")</code></label>
        </p>
        <p><strong>内容过滤选择器</strong>
            <button class="btn btn-default btn-sm">内容包含"div"的<code>$(".big:contains('div')")</code></button>
            <button class="btn btn-default btn-sm">内容为空的<code>$(".mini:empty")</code></button>
            <button class="btn btn-default btn-sm">内容包含".mini"元素的.big元素<code>$(".big:has(.mini)")</code></button>
            <button class="btn btn-default btn-sm">内容包含".mini"元素的.big元素<code>$(".mini:parent")</code></button>
        </p>
        <p><strong>可见性过滤选择器</strong>
            <button class="btn btn-default btn-sm">可见的.big<code>$(".big:visible")</code></button>
            <!--<button class="btn btn-default btn-sm self">不可见的元素<code>$("*:hidden").attr("type","").show()</code></button>-->
        </p>
        <p><strong>属性过滤选择器</strong>
            <button class="btn btn-default btn-sm">具有属性"title"的div<code>$("div[title]")</code></button>
            <button class="btn btn-default btn-sm">title属性值为"test"的div<code>$("div[title=test]")</code></button>
            <button class="btn btn-default btn-sm">title属性值不为"test"的div<code>$("div[title!=test]")</code></button>
            <button class="btn btn-default btn-sm">title属性值以"te"开头的div<code>$("div[title^=te]")</code></button>
            <button class="btn btn-default btn-sm">title属性值以"est"结尾的div<code>$("div[title$=est]")</code></button>
            <button class="btn btn-default btn-sm">title属性值含有"es"的div<code>$("div[title*=es]")</code></button>
            <button class="btn btn-default btn-sm">具有属性"id"且title属性值含有"es"的.big，<code>$("div[id][title*=es]")</code>
            </button>
            <button class="btn btn-default btn-sm">title属性值为"en"以及"en-"开头的div，<code>$("div[title|=en]")</code></button>
            <button class="btn btn-default btn-sm">title属性值为"uk"以及被空格分割后含有"uk"的div，<code>$("div[title~=uk]")</code>
            </button>
        </p>
    </section>
    <div class="content">
        <div class="bigSmallBox">

            <div class="big one" id="one"><!-- 1 -->
                class="one" id="one"的div
                <div class="mini">class="mini"<br>
                </div>
            </div>

            <div class="big one" id="two" title="test"><!-- 2 -->
                class="one" id="two" title="test"的div<br>
                <div class="mini" title="other">class="mini" title="other"</div>
                <div class="mini" title="test">class="mini" title="test"</div>
                <button class="btn btn-primary btn-sm">测试获焦</button>
                <button class="btn btn-primary btn-sm">测试获焦</button>
                <button class="btn btn-primary btn-sm">测试获焦</button>
            </div>

            <div class="big"><!-- 3 -->
                <div class="mini" id="mini3-1">class="mini"<br><span class="mini">内嵌的.mini</span></div>
                <div class="mini">class="mini"<br><span class="mini">内嵌的.mini</span></div>
                <div class="mini">class="mini"</div>
                <div class="mini"></div>
            </div>

            <div class="big"><!-- 4 -->
                <div class="mini">class="mini"</div>
                <div class="mini">class="mini"</div>
                <div class="mini" title="teest">class="mini" title="teest"</div>
                <div class="mini" title="tesst">class="mini" title="tesst"</div>
            </div>

            <div class="big" style="display: none"><!-- 5 -->
                style="display: none"
            </div>

            <div class="big testHide"><!-- 6 -->
                class="testHide"
            </div>

            <div class="big" id="big7"><!-- 7 -->
                包含input的type为hidden的div,点击可测试右边的动画。动画执行过程中可通过上方<strong>基本过滤选择器</strong>中按钮<code>$(":animated")</code>来观察选中情况。<br>
                <input type="hidden" size="18">
            </div>
            <span class="big" id="mover"><!-- 8 -->
                点击执行动画正在执行动画的span
        </span>
            <div class="big" title="en"><!-- 9 -->
                title="en"<br>
                <div class="mini" title="en-UK">class="mini" title="en-UK"</div>
                <div class="mini" title="english">class="mini" title="english"</div>
                <div class="mini" title="en uk">class="mini" title="en uk"</div>
                <div class="mini" title="uken">class="mini" title="uken"</div>
            </div>
        </div>
    </div>

    <section class="btnGroup">
        <p><strong>子元素过滤选择器</strong>
            <button class="btn btn-default btn-sm">表格的第3行(从0开始)<code>$("tr:nth(3)")</code></button>
            <button class="btn btn-default btn-sm">表格的第3行(从1开始)<code>$("tr:nth-child(3)")</code></button>
            <button class="btn btn-default btn-sm">表格的奇数行<code>$("tr:nth-child(odd)")</code></button>
            <button class="btn btn-default btn-sm">表格行后代元素中的偶数个<code>$("tr :nth-child(even)")</code></button>
            <button class="btn btn-default btn-sm">表格的3的倍数行<code>$("tr:nth-child(3n)")</code></button>
            <button class="btn btn-default btn-sm">表格的3n+1的倍数行<code>$("tr:nth-child(3n+1)")</code></button>
            <button class="btn btn-default btn-sm">表格中作为第一个的td<code>$("td:first-child")</code></button>
            <button class="btn btn-default btn-sm">表格中作为最后一个的td<code>$("td:last-child")</code></button>
            <button class="btn btn-default btn-sm">.mini中是父亲唯一子元素的<code>$(".mini:only-child")</code></button>
        </p>
    </section>

    <div class="content">
        <div class="headerGroup">
            <h2>这是h2标题</h2>
            <p>这是P段落</p>
            <h3>这是h3标题</h3>
            <span>这是span元素</span>
            <h4>这是h4标题</h4>
            <div>这是div段落</div>
            <h5>这是h5标题</h5>
        </div>
        <div class="tableBox">
            <table class="table table-bordered">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
            </table>
        </div>
    </div>

    <section class="btnGroup">
        <p><strong>表单对象属性过滤器</strong>
            <button class="btn btn-default btn-sm">表单中启用的input元素<code>$("input:enabled")</code></button>
            <button class="btn btn-default btn-sm">表单中禁用的input元素<code>$("input:disabled")</code></button>
            <button class="btn btn-default btn-sm self"
                    onclick="alert('选中的复选框总共个数：'+$('input[type=checkbox]:checked').length);">弹出复选框选中的个数<code>$('input[type=checkbox]:checked').length)</code>
            </button>
            <button class="btn btn-default btn-sm self"
                    onclick="alert('选中的单选框的值：'+$('input[type=radio]:checked').val());">选中的单选框的值<code>$('input[type=radio]:checked').val()</code>
            </button>
            <button class="btn btn-default btn-sm self" onclick="alert('下拉菜单中选中的值：'+$('select :selected').val());">
                下拉菜单中选中的值<code>$('select :selected').val())</code></button>
            <button class="btn btn-default btn-sm self" onclick="alert('下拉菜单中选中的值：'+$('select :selected').text());">
                下拉菜单中选中的文本<code>$('select :selected').text())</code></button>
        </p>
        <p><strong>表单选择器</strong>
            <!--<button class="btn btn-default btn-sm">表单中启用的input元素<code>$("input:enabled")</code></button>-->
            <button class="btn btn-default btn-sm self" onclick="alert('表单中input类型元素的个数：'+$('form :input').length);">
                表单中input类型元素(还包括下拉选框，文本框，按钮)的个数<code>$('form :input').length)</code></button>
            <button class="btn btn-default btn-sm">
                表单中类型为文本的input<code>$('form :text')</code></button>
        </p>
    </section>
    <div class="content">
        <form class="form-inline" method="post">
            <fieldset>
                <legend> 表单选择练习</legend>
                <div class="form-group">
                    可用元素<input class="form-control" name="add" value="可用文本框">
                    不可用元素<input class="form-control" name="email" value="不可用文本框" disabled>
                </div>
                <div class="form-group">
                    可用元素<input class="form-control" name="che" type="password" value="可用文本框">
                    不可用元素<input class="form-control" name="name" value="不可用文本框" disabled>
                </div>
                <div class="form-group">
                    <label><input type="checkbox" name="newsletter" checked value="test1">test1</label>
                    <label><input type="checkbox" name="newsletter" value="test2">test2</label>
                    <label><input type="checkbox" name="newsletter" value="test3">test3</label>
                    <label><input type="checkbox" name="newsletter" checked value="test4">test4</label>
                    <label><input type="checkbox" name="newsletter" value="test5">test5</label>
                </div>
                <br>
                <div class="form-group">
                    <label><input type="radio" name="news" checked value="test1">test1</label>
                    <label><input type="radio" name="news" value="test2">test2</label>
                    <label><input type="radio" name="news" value="test3">test3</label>
                    <label><input type="radio" name="news" checked value="test4">test4</label>
                    <label><input type="radio" name="news" value="test5" disabled>test5</label>
                </div>
                <br>
                <label for="test">下拉列表1</label><br>
                <select name="test" id="test" multiple style="height: 120px">
                    <option value="宝鸡" selected>宝鸡</option>
                    <option value="青岛" selected>青岛</option>
                    <option value="北京">北京</option>
                    <option value="乌鲁木齐" selected>乌鲁木齐</option>
                    <option value="大连">大连</option>
                </select>
                <br><br>
                <label for="test2">下拉列表2</label><br>
                <select name="test" id="test2">
                    <option>杭州</option>
                    <option selected>苏州</option>
                    <option>上海</option>
                </select><br><br>
                <div class="form-group">
                    <textarea class="form-control">请在这里留言</textarea>
                </div>
                <button class="btn btn-success">提交</button>
            </fieldset>
        </form>
    </div>
    <div class="alert alert-danger well-sm">
        <h4>注意事项：</h4>
        <ol>
            <li>其中的:first/last指的是选择所有元素后集合里面的第一个/最后一个，而不是像css中看元素在DOM中的位置来判断。</li>
            <li>:odd、:even、:eq、:gt、:lt 都是从0开始计数，:lt()和:gt()不包括当前下标</li>
            <li>:only-child可以在兄弟位置包含文本内容/li>
            <li>:empty选择的元素不包括任何文本和任何子元素;</li>
            <li>:parent选择的元素包括任何文本或者子元素</li>
            <li>:nth()计数从0开始，:nth-child()计数从1开始</li>
            <li>$('select :selected').val())只能获取到选中集合里面第一个元素的值；而$('select :selected').text())会自动遍历所有集合的文本再合并</li>
            <li>表单选择器:input包括input(文本框，密码框，单选框，复选框等等),select,button,textarea</li>
            <li>类似的，表单选择器也可以对表单里类型为radio、checked、submit（提交按钮）、image（图像按钮）、reset、button、file的元素进行选取。</li>
        </ol>
    </div>
</div>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script>
    $(function () {

        $("button:not(.self)").click(function () {
            $("*").removeClass("mark");
            var txt = $(this).children('code').text().slice(3, -2);
            $(".content").find(txt).addClass("mark")
        });

        $("#big7").click(function () {
            $(this).next().toggle(2000)
        });

        $(".content .btn").on("click keyup", function () {
            if ($(".testFocus").is(":checked")) {
                $("*").removeClass("mark");
                $(".bigSmallBox .btn:focus").addClass("mark");
            }
        });

        /*
                $("button.function").click(function () {
                    $("*").removeClass("mark");
                    var codeTxt = $(this).children('code').text();
                    var txt = codeTxt.slice(3, codeTxt.indexOf(".") - 2);

                    var funcName = "next()"
                    jQuery.fn.myFunction = function (funcName) {
                        //根据函数名得到函数类型
                        console.log(this.next()[0])
                        return eval("jQuery.fn.next()");
                        // alert(funcName)
                    }
                    console.log($(".bigSmallBox").find(txt).myFunction()[0]);
                    // $(".bigSmallBox").find(txt).myFunction(funcName);
                    // $(".bigSmallBox").find(txt).myFunction().addClass("mark");
                })
        */
//        至此，jQuery的选择器练习完成！
    })
</script>
</body>
</html>